<script setup lang="ts">
import { useLoadMore, useRequest } from 'vue-request'
import { fetchNoticeDetailAPI } from '@/apis/fetchNoticeDetail'
import type { LoadMoreData, Notice } from '@/types/api'
import { fetchNoticesAPI } from '@/apis/fetchNotices'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore } = useLoadMore<LoadMoreData<Notice>>(
  fetchData,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

/**
 * @description 分页服务函数
 */
async function fetchData(d?: LoadMoreData<Notice>): Promise<LoadMoreData<Notice>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchNoticesAPI(
    {
      page: _page.toString(),
      limit: '10',
    },
    userInfoStore.userInfo!.token!,
  )

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

function handleViewNoticeDetail(id: string) {
  router.push({
    name: 'noticeDetail',
    params: { id },
  })
}
</script>

<template>
  <view class="p-24rpx">
    <!-- 日期标题 START -->
    <!-- <view class="pb-24rpx pt-40rpx text-center text-32rpx text-#333333 font-medium leading-45rpx">
      09月09日 10:10
    </view> -->
    <!-- 日期标题 END -->

    <!-- 卡片 START -->
    <view
      v-for="item in dataList"
      :key="item.id"
      class="mb-24rpx rounded-10rpx bg-white p-40rpx"
      @tap="handleViewNoticeDetail(item.id.toString())"
    >
      <view class="text-33rpx text-#333333 font-medium leading-50rpx">
        {{ item.title }}
      </view>
      <Spacer h="24" />
      <view class="text-28rpx text-#333333 leading-40rpx">
        {{ item.introduce }}
      </view>
    </view>
    <!-- 卡片 END -->
    <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'notice'
style:
  navigationBarTitleText: '通知公告'
</route>
